---
image: /generated/articles-docs-lottie-lottie-lottiefiles.png
id: lottie-lottiefiles
sidebar_label: 'Finding Lottie files'
title: 'Finding Lottie files to use'
slug: lottiefiles
crumb: 'Resources'
---

import {InlineStep} from '../../components/InlineStep';

[LottieFiles](https://lottiefiles.com) is a website where people can share and download Lottie files.

<img src="https://pub-646d808d9cb240cea53bedc76dd3cd0c.r2.dev/lottiefiles.png" />

<br />
<br />

If you find a file that you like, click on it, then click `Download` <InlineStep>1</InlineStep> and choose `Lottie JSON` <InlineStep>2</InlineStep> as the format.

<img src="https://pub-646d808d9cb240cea53bedc76dd3cd0c.r2.dev/lottiefiles-instructions.png" />

### Import the file into Remotion

Copy the file into the Remotion project. The recommended way is to put the JSON inside the `public/` folder of Remotion (create it if necessary) and then load it using [`staticFile()`](/docs/staticfile):

```tsx twoslash title="Animation.tsx"
import {Lottie, LottieAnimationData} from '@remotion/lottie';
import {useEffect, useState} from 'react';
import {cancelRender, continueRender, delayRender, staticFile} from 'remotion';

const Balloons = () => {
  const [handle] = useState(() => delayRender('Loading Lottie animation'));

  const [animationData, setAnimationData] = useState<LottieAnimationData | null>(null);

  useEffect(() => {
    fetch(staticFile('animation.json'))
      .then((data) => data.json())
      .then((json) => {
        setAnimationData(json);
        continueRender(handle);
      })
      .catch((err) => {
        cancelRender(err);
      });
  }, [handle]);

  if (!animationData) {
    return null;
  }

  return <Lottie animationData={animationData} />;
};
```

## See also

- [Import from After Effects](/docs/after-effects)
